<template>
  <div class="demo_sty">
    <el-scrollbar style="height: 100%" >
      <div class="return">
        <span><i class="el-icon-back"></i>   返回</span>
      </div>
      <div class="separator_sty"></div>
      <div class="form_sty">
        <el-form label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item  label="主题" prop="name" >
                <el-input v-model="form2.name" placeholder="优品创意公司第一次合作"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="对应客户" prop="amount">
                <el-input  v-model="form2.amount" placeholder="优品创意公司"  v-on:click.native="add"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="对应 机会" prop="region">
                <el-select v-model="form2.region" placeholder="机会列表" style="width:217px">
                  <el-option label="机会一" value="shanghai"></el-option>
                  <el-option label="机会二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="订单编号" prop="contract">
                <el-input v-model="form2.contract" placeholder="2002201533"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="日期" prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="form2.date1" style="width: 217px;"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="最晚发货" prop="date1">
                <el-date-picker type="date" placeholder="选择日期"  v-model="form2.date2" style="width: 217px;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="签约人" prop="contractor">
                <el-input  v-model="form2.contractor" placeholder="王志杰"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所有者" prop="ownernaem">
                <el-input v-model="form2.ownernaem" placeholder="陈默"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出库途径" prop="tujing">
                <el-select  v-model="form2.tujing"  placeholder="出库途径" style="width:217px">
                  <el-option label="快递" value="shanghai"></el-option>
                  <el-option label="店面提车" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="总金额" prop="total">
                <el-input v-model="form2.total" type="number" placeholder="12000,000"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回款金额" prop="receivable_total">
                <el-input v-model="form2.receivable_total" type="number" placeholder="5000,000"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="付款方式" prop="payment">
                <el-select v-model="form2.payment" placeholder="付款方式" style="width:217px">
                  <el-option label="支票" value="shanghai"></el-option>
                  <el-option label="现金" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="状态" prop="resource">
            <el-radio-group v-model="form2.resource">
              <el-radio label="执行中"></el-radio>
              <el-radio label="结束"></el-radio>
              <el-radio label="意外终止"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注 " prop="desc">
            <el-input type="textarea" v-model="form2.desc"></el-input>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" @click="onSubmit2">保存</el-button>
          </el-form-item>
        </el-form>

        <!--客户查询弹框--->
       <el-dialog title="客户池"   :visible.sync="addformVisable" :close-on-click-modal="false">
         <el-row>
           <er-col :span="12">
             <el-input placeholder="请输入内容" v-model="input10" clearable>
             </el-input>
           </er-col>
           <el-col :span="12">
             <el-button style="float:left;margin: 0 0 10px 10px" type="primary" icon="el-icon-search">搜索</el-button>
           </el-col>
         </el-row>
         <el-table
           :data="tableData3"
           height="250"
           border
           style="width: 100%">
           <el-table-column
             prop="id"
             label="ID"
             width="100">
           </el-table-column>
           <el-table-column
             prop="company"
             label="公司名称"
             width="180">
           </el-table-column>
           <el-table-column
             prop="contract"
             label="合同名称">
           </el-table-column>
           <el-table-column
             prop="contact"
             label="联系人"
             width="100">
           </el-table-column>
         </el-table>
       </el-dialog>
      </div>
    </el-scrollbar>

  </div>
</template>

<script>
  export default {
    name: 'Csdemo',
    data(){
      return{
        input10:'',//客户查询
        addformVisable: false,//客户隐藏窗体
        //客户信息
        tableData3: [{
          id: '11',
          company: '优品创意公司',
          contact: '张毅',
          contract:'2019款一汽大众合同'
        }, {
          id: '123',
          company: '北京天方科技有限公司',
          contact:'李睿',
          contract:'2018款福特gt合同'
        },{
          id: '123',
          company: '北京天方科技有限公司',
          contact:'李睿',
          contract:'2018款福特gt合同'
        },{
          id: '123',
          company: '北京天方科技有限公司',
          contact:'李睿',
          contract:'2018款福特gt合同'
        },{
          id: '123',
          company: '北京天方科技有限公司',
          contact:'李睿',
          contract:'2018款福特gt合同'
        }],
        form2: {
          //表单对象
          name: "",//主题
          amount: "",//对应客户
          region: "",//对应机会
          contract:"",//合同编号
          date1: "",//合同生效时间
          date2: "",//合同失效时间
          contractor:"",//签约人
          ownernaem:"",//所有者
          date3:"",//签约时间,
          total:"",//总金额，
          receivable_total:"",//回款金额
          payment:"",//付款方式
          resource: "",//状态
          desc: "",//备注
          tujing:""//订单途径
        },
      };
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //客户选择弹框显示
      add(){
        this.addformVisable=true;
      },
      //表单2提交
      onSubmit2() {
        this.$refs["form02"].validate(valid => {
          if (valid) {
            this.$alert("表单验证通过，提交成功", "标题名称", {
              confirmButtonText: "确定",
              callback: action => {
                //   this.$message({
                //     type: "info",
                //     message: `action: ${action}`
                //   });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    }
  }
</script>

<style scoped>
  .el-button--primary{
    margin: 0 0 0 445px;
  }
  .main_sty{
    border: 1px solid red;
    width: 100%;
  }
  .demo_sty{
    border:1px solid #ccc;
    width:100%;
    height: 545px;
    background: white;
    border-radius: 5px;
    box-shadow:#ccc 0px 0px 10px;
    overflow:hidden;
  }
  .return{
    border-right:1px solid #ccc;
    width:70px;
    color:#777;
    font-size: 13px;
    margin-left:10px;
    margin-top:10px;
    cursor: pointer;

  }
  .return:hover{
    color:#409eff;
    font-max-size: 10px;
  }
  .form_sty{
    border:1px solid #FFFFFF;
    background-color: #FFFFFF;
  }
  .form_sty>>>.el-form-item{
    margin: 10px 1px 1px ;
    padding: 10px 1px 1px 1px;
  }

  .form_sty>>>.el-form-item{
    margin: 10px 1px 1px ;
    padding: 10px 1px 1px 1px;
  }

  .form_sty>>>.el-form-item__label{
    text-align: left;
    padding: 0 0 0 19px;
  }

  .form_sty>>>.el-input__inner{
    border-top:none;
    border-left: none;
    border-right: none;
  }
  .form_sty>>>.el-dialog__body{
    padding:5px 20px;
  }
  .el-form-item{
    padding: 20px 100px 0 10px;
  }
  .el-input{
    width: 50%;
    float: left;
    width: 217px;
  }
  .separator_sty{
    border:1px solid #409eff;
    width: 95%;
    margin: 10px auto;
  }
  .dialogmesg_sty{
    border:1px solid #409eff;
    position: absolute;
    width: 95%;
    margin:-30px 1px 1px 1px ;
  }
</style>
